<template>
    <div class="add-content">
        <div>
            <el-form :model="state.form" label-width="auto" :rules="innerrule" ref="formRef">
                <el-form-item label="打印机备注名称" prop="printerName">
                    <el-input
                        v-model.trim="state.form.printerName"
                        maxlength="20"
                        show-word-limit
                        placeholder="请输入打印机备注名称，不超过20个字"></el-input>
                </el-form-item>
                <el-form-item label="打印机编号" prop="printerSn">
                    <el-input v-model="state.form.printerSn" placeholder="请输入打印机编号，9位数字"></el-input>
                </el-form-item>
                <el-form-item label="打印机密钥" prop="printerKey">
                    <el-input v-model="state.form.printerKey" placeholder="请输入打印机密钥"></el-input>
                </el-form-item>
            </el-form>
        </div>
        <div class="add-btn">
            <el-button @click="router.go(-1)">取消</el-button>
            <el-button type="primary" @click="save(formRef)">保存</el-button>
        </div>
    </div>
</template>
<script setup>
import { ref, reactive } from 'vue';
import { useRouter } from 'vue-router';
import request from '@/request';
import { ElMessage } from 'element-plus';
const router = useRouter();
const formRef = ref();
const state = reactive({ form: { printerName: '', printerSn: '', printerKey: '' } });
const innerrule = reactive({
    printerSn: [
        { required: true, message: '打印机编号不能为空' },
        {
            pattern: /^\d{9}$/,
            message: '请输入9位数字'
        }
    ],
    printerName: [{ required: true, message: '打印机备注名称不能为空' }],
    printerKey: [{ required: true, message: '打印机密钥不能为空' }]
});
const save = async formEl => {
    if (!formEl) return;
    await formEl.validate(valid => {
        if (valid) {
            request('printerAdd', { ...state.form, printerSn: Number(state.form.printerSn) }).then(res => {
                ElMessage.success(`添加成功`);
                router.go(-1);
            });
        }
    });
};
</script>
<style lang="scss" scoped>
:deep(.el-input) {
    width: 500px;
}
.add-content {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    min-height: calc(100vh - 190px);
    .add-btn {
        text-align: center;
    }
}
</style>
